<template>
    <div class="ace-container">
        <div class="ace-editor" ref="ace"></div>


<!--        <div class="config-panel" v-show="toggle">-->
<!--            <div>-->
<!--                <div class="item">-->
<!--                    <label class="title">语言</label>-->
<!--                    <el-select class="value" v-model="modePath" @change="handleModelPathChange" size="mini" value-key="name">-->
<!--                        <el-option v-for="mode in modeArray"-->
<!--                                   :key="mode.name"-->
<!--                                   :label="mode.name"-->
<!--                                   :value="mode.path">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </div>-->

<!--                <div class="item">-->
<!--                    <label class="title">换行</label>-->
<!--                    <el-select class="value" v-model="wrap" @change="handleWrapChange" size="mini" value-key="name">-->
<!--                        <el-option v-for="wrap in wrapArray"-->
<!--                                   :key="wrap.name"-->
<!--                                   :label="wrap.name"-->
<!--                                   :value="wrap.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="bookmarklet" @click="toggleConfigPanel">-->
<!--            <i class='el-icon-more'></i>-->
<!--        </div>-->
    </div>
</template>

<script>
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/snippets/html'
import 'ace-builds/src-noconflict/snippets/css'
import 'ace-builds/src-noconflict/snippets/scss'
import 'ace-builds/src-noconflict/snippets/json'
import 'ace-builds/src-noconflict/snippets/java'
import 'ace-builds/src-noconflict/snippets/text'
import 'ace-builds/webpack-resolver'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/theme-monokai'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/mode-c_cpp'

// const themeArray = [{
//   name: 'monokai',
//   path: 'ace/theme/monokai'
// }]

const wrapArray = [{
    name: '开启',
    value: true
}, {
    name: '关闭',
    value: false
}]

const modeArray = [{
    name: 'JavaScript',
    path: 'ace/mode/javascript'
}, {
    name: 'HTML',
    path: 'ace/mode/html'
}, {
    name: 'CSS',
    path: 'ace/mode/css'
}, {
    name: 'SCSS',
    path: 'ace/mode/scss'
}, {
    name: 'Json',
    path: 'ace/mode/json'
}, {
    name: 'Java',
    path: 'ace/mode/java'
}, {
    name: 'Text',
    path: 'ace/mode/text'
}, {
    name: 'C++',
    path: 'ace/mode/text_highlight_rules'
}]

export default {
    props: {
        value: String
    },
    mounted () {
        this.aceEditor = ace.edit(this.$refs.ace, {
            maxLines: 30,
            minLines: 30,
            fontSize: 20,
            value: this.value ? this.value : '',
            theme: this.themePath,
            mode: this.modePath,
            wrap: this.wrap,
            tabSize: 4
        })
        // 激活自动提示
        this.aceEditor.setOptions({
            enableSnippets: true,
            enableLiveAutocompletion: true,
            enableBasicAutocompletion: true
        })
        this.aceEditor.getSession().on('change', this.change)
        // this.aceEditor.setScrollSpeed(4)
    },
    data () {
        return {
            aceEditor: null,
            toggle: false,
            wrap: true,
            themePath: 'ace/theme/github',
            modePath: 'ace/mode/text',
            modeArray: modeArray,
            wrapArray: wrapArray,
            upload: 0,
            suffix: '',
            url: ''
        }
    },
    methods: {
        toggleConfigPanel () {
            this.toggle = !this.toggle
        },
        change () {
            this.$emit('input', this.aceEditor.getSession().getValue())
        },
        handleModelPathChange (modelPath) {
            this.aceEditor.getSession().setMode(modelPath)
        },
        handleWrapChange (wrap) {
            this.aceEditor.getSession().setUseWrapMode(wrap)
        },
        // handleUploadSuccess :function(response, file, fileList) {
        //     // console.log(response)
        //     this.upload = 1
        // },
        // handleUploadRemove :function() {
        //     this.upload = 0
        // },
    }
}
</script>

<style lang='scss' scoped>
.ace-container {
    position: relative;

    .config-panel {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
        height: 100%;
        overflow: scroll;
        box-shadow: grey -5px 2px 3px;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 1;

        .item {
            margin: 10px auto;
            text-align: center;

            .title {
                color: white;
                margin: 0 10px;
                font-size: 14px;
            }
        }
    }

    .bookmarklet {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        z-index: 2;
        border-radius: 5px;
        cursor: pointer;
        //border-width: 9px;
        //border-style: solid;
        //border-color: lightblue gray gray rgb(206, 173, 230);
        //background-color: gray;
        border-image: initial;
        color: black;
    }
    *{
        border-radius: 10px;
    }
}
</style>
